<template>
    <view class="preparing-content">
        <!-- 用户信息卡片 -->
        <view class="user-card" @click="goToUserInfo">
            <view class="user-info">
                <image
                    src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1061&q=80"
                    alt="用户头像"
                    class="user-avatar"
                />
                <view>
                    <view class="user-name">刘小红，你好！</view>
                    <view class="user-status">备孕期 · 第3个月</view>
                </view>
            </view>
            <view class="cycle-tracking">
                <view class="flex justify-between items-center mb-1">
                    <view class="text-sm font-medium text-gray-700">月经周期追踪</view>
                    <view class="text-xs text-pink-500">
                        <text class="fas fa-calendar-alt mr-1"></text>
                        距离下次经期还有
                        <text class="font-semibold">7天</text>
                    </view>
                </view>
                <view class="progress-container">
                    <view class="progress-bar" style="width: 75%"></view>
                </view>
                <view class="flex justify-between text-xs text-gray-500 mt-1">
                    <text>上次经期：10月11日</text>
                    <text>预计下次：11月8日</text>
                </view>
            </view>
        </view>

        <!-- 健康行为与饮食指导 -->
        <view class="health-guidance-section">
            <view class="section-title">
                <text class="fas fa-heartbeat"></text>
                健康指导
            </view>
            <view class="guidance-cards">
                <view class="guidance-card">
                    <view class="guidance-icon bg-green">
                        <text class="fas fa-utensils"></text>
                    </view>
                    <view class="guidance-title">备孕饮食指导</view>
                    <view class="guidance-desc">增加叶酸摄入，提高受孕率</view>
                </view>
                <view class="guidance-card">
                    <view class="guidance-icon bg-blue">
                        <text class="fas fa-running"></text>
                    </view>
                    <view class="guidance-title">备孕行为建议</view>
                    <view class="guidance-desc">适量运动，避免熬夜</view>
                </view>
            </view>
        </view>

        <!-- 备孕核心功能 -->
        <view class="core-functions">
            <view class="section-title">
                <text class="fas fa-magic"></text>
                备孕助手
            </view>
            <view class="function-grid">
                <view class="function-item">
                    <view class="function-icon">
                        <text class="fas fa-calendar-alt"></text>
                    </view>
                    <view class="function-name">经期日历</view>
                </view>
                <view class="function-item">
                    <view class="function-icon">
                        <text class="fas fa-venus"></text>
                    </view>
                    <view class="function-name">排卵预测</view>
                </view>
                <view class="function-item">
                    <view class="function-icon">
                        <text class="fas fa-temperature-high"></text>
                    </view>
                    <view class="function-name">基础体温</view>
                </view>
                <view class="function-item">
                    <view class="function-icon">
                        <text class="fas fa-file-medical-alt"></text>
                    </view>
                    <view class="function-name">症状记录</view>
                </view>
                <view class="function-item">
                    <view class="function-icon">
                        <text class="fas fa-tint"></text>
                    </view>
                    <view class="function-name">白带检测</view>
                </view>
                <view class="function-item">
                    <view class="function-icon">
                        <text class="fas fa-chart-line"></text>
                    </view>
                    <view class="function-name">数据分析</view>
                </view>
                <view class="function-item">
                    <view class="function-icon">
                        <text class="fas fa-clipboard-check"></text>
                    </view>
                    <view class="function-name">备孕检查</view>
                </view>
                <view class="function-item">
                    <view class="function-icon">
                        <text class="fas fa-pills"></text>
                    </view>
                    <view class="function-name">营养补充</view>
                </view>
            </view>
        </view>

        <!-- 备孕每日任务 -->
        <view class="content-card">
            <view class="card-header">
                <view class="card-title">
                    <text class="fas fa-tasks"></text>
                    每日健康任务
                </view>
                <view class="card-more">
                    查看全部
                    <text class="fas fa-chevron-right"></text>
                </view>
            </view>
            <view class="space-y-3">
                <view class="flex items-center">
                    <view
                        class="w-6 h-6 rounded-full border border-pink-400 flex items-center justify-center mr-3 text-pink-400"
                    >
                        <text class="fas fa-check text-xs"></text>
                    </view>
                    <view class="flex-1">
                        <view class="flex justify-between">
                            <view class="text-sm">记录基础体温</view>
                            <view class="text-xs text-gray-400">已完成</view>
                        </view>
                    </view>
                </view>
                <view class="flex items-center">
                    <view class="w-6 h-6 rounded-full border border-pink-400 mr-3"></view>
                    <view class="flex-1">
                        <view class="flex justify-between">
                            <view class="text-sm">服用叶酸片</view>
                            <view class="text-xs text-gray-400">今天</view>
                        </view>
                    </view>
                </view>
                <view class="flex items-center">
                    <view class="w-6 h-6 rounded-full border border-pink-400 mr-3"></view>
                    <view class="flex-1">
                        <view class="flex justify-between">
                            <view class="text-sm">进行20分钟有氧运动</view>
                            <view class="text-xs text-gray-400">今天</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 备孕知识推荐 -->
        <view class="content-card">
            <view class="card-header">
                <view class="card-title">
                    <text class="fas fa-lightbulb"></text>
                    备孕知识推荐
                </view>
                <view class="card-more">
                    更多
                    <text class="fas fa-chevron-right"></text>
                </view>
            </view>
            <view class="article-list">
                <view class="article-item">
                    <image
                        src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80"
                        class="article-image"
                        mode="aspectFill"
                    />
                    <view class="article-content">
                        <view class="article-title"
                            >提高受孕几率的七个科学方法，第四个最容易被忽略</view
                        >
                        <view class="article-meta">
                            <view class="article-tag">备孕锦囊</view>
                            <view class="article-views">1.2万阅读</view>
                        </view>
                    </view>
                </view>
                <view class="article-item">
                    <image
                        src="https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1854&q=80"
                        class="article-image"
                        mode="aspectFill"
                    />
                    <view class="article-content">
                        <view class="article-title">备孕期间的营养补充指南，专家建议这样吃</view>
                        <view class="article-meta">
                            <view class="article-tag">饮食指南</view>
                            <view class="article-views">8563阅读</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'

function goToUserInfo() {
    uni.navigateTo({
        url: '/periodPage/pages/period_calendar'
    })
}

// 组件逻辑代码
</script>

<style lang="scss" scoped>
.preparing-content {
    display: block;
}

.user-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 18px;
    margin: 15px 15px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 12px;
    border: 2px solid #ffd6e0;
}

.user-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.user-status {
    font-size: 12px;
    color: #666;
}

.progress-container {
    background-color: #f5f5f5;
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
    margin: 8px 0;
}

.progress-bar {
    background-color: #ff9fb5;
    height: 100%;
    border-radius: 10px;
}

.health-guidance-section {
    margin: 0 15px 15px;
}

.section-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;
    display: flex;
    align-items: center;
}

.section-title text {
    color: #ff9fb5;
    margin-right: 8px;
}

.guidance-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.guidance-card {
    background-color: white;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.guidance-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    color: white;
    font-size: 20px;
}

.guidance-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #333;
}

.guidance-desc {
    font-size: 12px;
    color: #888;
    text-align: center;
}

.core-functions {
    margin: 0 15px 15px;
}

.function-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    background-color: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.function-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background-color: #fff0f4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
    color: #ff7b9c;
    font-size: 20px;
}

.function-name {
    font-size: 12px;
    color: #555;
    text-align: center;
}

.content-card {
    background-color: white;
    border-radius: 12px;
    padding: 15px;
    margin: 0 15px 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
}

.card-title text {
    color: #ff9fb5;
    margin-right: 8px;
}

.card-more {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
}

.article-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.article-item {
    display: flex;
    gap: 12px;
}

.article-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    flex-shrink: 0;
}

.article-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.article-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.article-tag {
    background-color: #fff0f4;
    color: #ff7b9c;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

.article-views {
    font-size: 10px;
    color: #999;
}

.bg-green {
    background-color: #81c784;
}

.bg-blue {
    background-color: #64b5f6;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mr-3 {
    margin-right: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.text-gray-700 {
    color: #374151;
}

.text-gray-500 {
    color: #6b7280;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-pink-500 {
    color: #ec4899;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.rounded-full {
    border-radius: 9999px;
}

.border {
    border-width: 1px;
}

.border-pink-400 {
    border-color: #f472b6;
}

.space-y-3 > * + * {
    margin-top: 0.75rem;
}
</style>
